<!--
  * 出库单
  *
  * @Author:    zzx
  * @Date:      2025-08-13 15:17:33
  * @Copyright  zzx
-->
<template>
  <div  >
    <a-row class="smart-table-btn-block operate-header" >
      <a-col :flex="5">
        <div class="smart-table-operate-block">
          <a-button  type="primary" @click="addItem()">
            <template #icon>
              <PlusOutlined />
            </template>
            添加明细
          </a-button>
          <a-button  type="primary" danger :disabled="selectedRowKeyList.length === 0" @click="onDelete">
            <template #icon>
              <DeleteOutlined />
            </template>
            批量删除
          </a-button>
        </div>
      </a-col>

      <a-col :flex="1">
        <div :style="{position: 'absolute',right: 0,textAlign: 'right'}" >
          <!--          <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>-->
          <a-button type="primary" @click="onSubmit">提交</a-button>
        </div>
      </a-col>
    </a-row>
    <a-card>
      <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }" >
        <a-row :gutter="30">
          <a-col :span="12">
            <a-form-item label="收货联系人"  name="receiveUser">
              <a-input style="width: 100%" v-model:value="form.receiveUser" placeholder="收货联系人" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="收货手机号"  name="receiveTel">
              <a-input style="width: 100%" v-model:value="form.receiveTel" placeholder="收货手机号" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="12">
            <a-form-item label="司机联系人"  name="driverUser">
              <a-input style="width: 100%" v-model:value="form.driverUser" placeholder="司机联系人" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="司机手机号"  name="driverTel">
              <a-input style="width: 100%" v-model:value="form.driverTel" placeholder="司机手机号" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="12">
            <a-form-item label="出库完成" >
              <a-checkbox v-model:checked="completeCheck" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-table
            size="small"
            :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
            :dataSource="form.list"
            :columns="columns"
            :rowKey="(record,index)=>{return index}"
            :bordered="true"
            :pagination="false"
        >

          <template #bodyCell="{ text, record, index, column }">
            <!--          位置-->
            <template v-if="column.dataIndex === 'itemPosition'">
              <a-form-item :name="column.dataIndex" class="form-item-no-margin">
                <a-input style="width: 100%" v-model:value="record.itemPosition" :placeholder="column.title" />
              </a-form-item>
            </template>
            <!--          品名-->
            <template v-if="column.dataIndex === 'productName'">
              <a-form-item :name="column.dataIndex" class="form-item-no-margin">
                <a-input style="width: 100%" v-model:value="record.productName" :placeholder="column.title" />
              </a-form-item>
            </template>
            <!--          规格-->
            <template v-if="column.dataIndex === 'itemProductName'">
              <a-form-item :name="column.dataIndex"  class="form-item-no-margin">
                <a-input style="width: 100%" v-model:value="record.itemProductName" :placeholder="column.title" />
              </a-form-item>
            </template>
            <!--          长-->
            <template v-if="column.dataIndex === 'itemLong'">
              <a-form-item  :name="column.dataIndex" class="form-item-no-margin">
                <a-input-number style="width: 100%" v-model:value="record.itemLong" :placeholder="column.title"
                                min="0" />
              </a-form-item>
            </template>
            <!--          宽-->
            <template v-if="column.dataIndex === 'itemWidth'">
              <a-form-item  :name="column.dataIndex" class="form-item-no-margin">
                <a-input-number style="width: 100%" v-model:value="record.itemWidth" :placeholder="column.title"
                                min="0" />
              </a-form-item>
            </template>
            <!--          高-->
            <template v-if="column.dataIndex === 'itemHeight'">
              <a-form-item  :name="column.dataIndex" class="form-item-no-margin">
                <a-input-number style="width: 100%" v-model:value="record.itemHeight" :placeholder="column.title"
                                min="0" />
              </a-form-item>
            </template>
            <!--          单位-->
            <template v-if="column.dataIndex === 'itemUnit'">
              <a-form-item :name="column.dataIndex" class="form-item-no-margin">
                <a-input style="width: 100%" v-model:value="record.itemUnit" :placeholder="column.title" />
              </a-form-item>
            </template>
            <!--          数量-->
            <template v-if="column.dataIndex === 'itemNum'">
              <a-form-item :name="column.dataIndex" class="form-item-no-margin">
                <a-input-number style="width: 100%" v-model:value="record.itemNum" :placeholder="column.title"
                                min="0"/>
              </a-form-item>
            </template>
            <!--          备注-->
            <template v-if="column.dataIndex === 'remark'">
              <a-form-item :name="column.dataIndex" class="form-item-no-margin">
                <a-input style="width: 100%" v-model:value="record.remark" :placeholder="column.title" />
              </a-form-item>
            </template>
          </template>
        </a-table>
      </a-form>

      <template #footer>
        <a-space>
          <a-button @click="onClose">取消</a-button>
          <a-button type="primary" @click="onSubmit">保存</a-button>
        </a-space>
      </template>
    </a-card>


  </div>
</template>
<script setup>
import {reactive, ref, nextTick, onMounted} from 'vue';
  import _ from 'lodash';
  import { message } from 'ant-design-vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { outboundInfoApi } from '/@/api/business/project/outbound-info-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  import {useRoute} from "vue-router";

  // ------------------------ 事件 ------------------------

  const emits = defineEmits(['reloadList']);

  // ------------------------ 显示与隐藏 ------------------------
  // 是否显示
  const visibleFlag = ref(false);


  // ------------------------ 表单 ------------------------

  // 组件ref
  const formRef = ref();

  const formDefault = {
    receiveUser: undefined, //收货联系人
    receiveTel: undefined, //收货手机号
    driverUser: undefined, //司机联系人
    driverTel: undefined, //司机手机号
    outboundComplete: 0, //是否完成
  };

  // let form = reactive({ ...formDefault });
  let form = ref({});
  const completeCheck = ref(false);

  const rules = {
    receiveUser: [{ required: true, message: '收货联系人 必填' }],
    receiveTel: [{ required: true, message: '收货手机号 必填' }],
    driverUser: [{ required: true, message: '司机联系人 必填' }],
    driverTel: [{ required: true, message: '司机手机号 必填' }],
  };

  const route = useRoute();
  let cuttingId = ref();
  let outboundId = ref();

  onMounted(() => {
    if (route.query.cuttingId) {
      cuttingId.value = Number(route.query.cuttingId);
    }
    if (route.query.outboundId) {
      outboundId.value = Number(route.query.outboundId);
      getDetail();
    } else {
      getEmptyDetail()
    }
  });

  async function getDetail() {
    try {
      let result = await outboundInfoApi.detail(outboundId.value);
      form.value = result.data;
      completeCheck.value = result.data.outboundComplete === 1
    } catch (error) {
      smartSentry.captureError(error);
    } finally {
      SmartLoading.hide();
    }
  }

  function getEmptyDetail() {
    form.value = formDefault
    let obj = {
      itemPosition: "",
      itemProductName: "",
      itemLong: "",
      itemWidth: "",
      itemHeight: "",
      itemUnit: "",
      itemNum: "",
      serialNumber: 1,
      remark: "",
      type: 0,
      disabledFlag: 0,
    }
    form.value.list = [obj]
  }

  function addItem() {
    let index = 0
    if (form.value.list.length > 0) { index = form.value.list.length }
    let obj = {
      itemPosition: "",
      itemProductName: "",
      itemLong: "",
      itemWidth: "",
      itemHeight: "",
      itemUnit: "",
      itemNum: "",
      serialNumber: index + 1 ,
      remark: "",
      type: 0,
      disabledFlag: 0,
    }
    form.value.list.splice(index, 0, obj)
  }


  const columns = ref([
    {
      title: '位置',
      dataIndex: 'itemPosition',
      ellipsis: true,
      width: 150,
    },
    {
      title: '品名',
      dataIndex: 'itemProductName',
      ellipsis: true,
    },
    {
      title: '长(mm)',
      dataIndex: 'itemLong',
      ellipsis: true,
      width: 150,
    },
    {
      title: '宽(mm)',
      dataIndex: 'itemWidth',
      ellipsis: true,
      width: 150,
    },
    {
      title: '高(mm)',
      dataIndex: 'itemHeight',
      ellipsis: true,
      width: 150,
    },
    {
      title: '单位',
      dataIndex: 'itemUnit',
      ellipsis: true,
      width: 100,
    },
    {
      title: '数量',
      dataIndex: 'itemNum',
      ellipsis: true,
      width: 100,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      ellipsis: true,
    }
  ]);

  // 点击确定，验证表单
  async function onSubmit() {
    try {
      await formRef.value.validateFields();
      save();
    } catch (err) {
      message.error('参数验证错误，请仔细填写表单数据!');
    }
  }

  // 新建、编辑API
  async function save() {
    SmartLoading.show();
    try {

      form.value.outboundComplete = completeCheck.value === true ? 1 : 0
      if (form.value.outboundId) {
        await outboundInfoApi.update(form.value);
      } else {
        form.value.cuttingId = cuttingId.value
        await outboundInfoApi.add(form.value);
      }
      message.success('操作成功');
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
  }


  // 选择表格行
  const selectedRowKeyList = ref([]);

  function onSelectChange(selectedRowKeys) {
    selectedRowKeyList.value = selectedRowKeys;
  }

  function onDelete() {
    selectedRowKeyList.value.sort((a,b) => b-a) // 降序
    for (let i = 0; i < selectedRowKeyList.value.length; i++) {
      let index = selectedRowKeyList.value[i]
      form.value.list.splice(index, 1)
    }
    selectedRowKeyList.value = []
  }
</script>

<style scoped lang="less">
.form-item-no-margin{
  margin-bottom: 0;
}
.operate-header {
  background-color: #fff;
  padding: 10px;
  //position: fixed;
  //right: 0;
  //top:90px;
  //width: 85%;
  //z-index: 2000;
}
</style>

